/*
* peer  用来选择兄弟元素 改变兄弟元素的样式
* peer-*
* 注意事项： .peer 被参考元素必须在 peer-*参考元素之前
*
* */
export default function Page(){
  return (
    <div>
      <input className={'peer/one'} type={'checkbox'}/>
      <p className={'peer-checked/one:text-amber-500'}>千里之行始于足下1</p>
      <div>
        <input className={'peer'} type={'checkbox'}/>
        <p className={'peer-checked:text-emerald-400'}>千里之行始于足下2</p>
      </div>
      <input type={'checkbox'}/>
      <p>千里之行始于足下3</p>
      <input className={'peer/two'} type={'checkbox'}/>
      <p className={'peer-checked/two:text-pink-400'}>千里之行始于足下4</p>
    </div>
  )
}
